@import "~@/scss/themes/index.scss";

.uc-user {
  .user-btns .ui-btn {
    color: #ccc;
    padding: 0 10px;
    white-space: nowrap;

    &:hover {
      color: $brand-primary;
    }
  }

  .uc-user__user--logining {
    cursor: pointer;
    .user--lesson {
      padding: 0 10px;
    }
    .user__avatar {
      height: 40px;
      width: 40px;
      border-radius: 50%;
    }
  }
}

.header-user__poppver-container {
  .user-container {
    width: 100%;
    align-items: flex-start;
    .user-meta {
      padding: 0 0 0 10px;
    }
    .user-info {
      line-height: 30px;
    }
    .user-description {
      line-height: 30px;
    }
  }
  .poppver-vip {
    margin-top: 20px;
    padding: 12px 13px;
    background-color: #fff5f1;
    .vip-metas {
      flex: 1;
    }
    .vip-metas__meta {
      margin-bottom: 0;
      line-height: 1.6;
      font-size: 12px;
    }

    .vip-action {
      flex: 0 0 86px;
      width: 86px;
      height: 28px;
      line-height: 28px;
      .el-button {
        width: 86px;
        height: 28px;
        line-height: 28px;
        border-radius: 28px;
        padding: 0;
      }
    }
  }

  .poppver-center-box {
    margin-top: 16px;
    margin-bottom: 14px;
    .box-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 128px;
      margin-bottom: 2px;
      line-height: 36px;
      font-size: 14px;
      color: #333;
      background: #f8fafc;
      cursor: pointer;
      &:nth-child(2n-1) {
        margin-right: 2px;
      }

      &:hover {
        background-color: #d9dde1;
      }

      & > img {
        margin-right: 10px;
      }
    }
  }

  .poppver-studyrecord {
    .studyrecord-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .dot {
        background: #666;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .line {
        margin-left: 12px;
        display: inline-block;
        width: 178px;
        height: 1px;
        background: #666;
      }
    }
  }
}
